<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米导航</title>
        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .wrapper {
                border: 1px solid red ;
                width: 100% ;
                margin: 50px 0 ;
                position: relative ; /* 仅仅是为了让后代能够参照自己进行定位而已，自己位置不要动 */
                height: 460px ;
            }
            .categories {
                position: absolute ;
                left: 10% ;
                height: 460px ;
                width: 234px ;
                background-color: rgba(222, 222, 222, 0.75);
                margin: auto ;
            }

            .category {  }
            /* 亲子选择器 */
            .category>a { display: block ; height: 42px ; text-decoration: none ; font-size: 14px ;  }
            .category>a:hover { background-color: #ffff00; }
            .category .title { float: left ; margin-left: 20px ; line-height: 42px ; }
            .category .arrow { float: right ; margin-right: 15px ;  line-height: 42px ; }

            .category .sub-category {
                position: absolute ; /* 自己琢磨相对于谁进行定位 (可就是参照那个元素进行定位 ) */
                left: 234px ; /* 被定位的元素的左侧边缘距离参照元素左侧边缘的偏移量 */
                top : 0 ; /* 被定位的元素的顶部边缘距离参照元素顶部边缘的偏移量 */
                width: 300% ; /* 相对于 被参照元素 的宽度来确定被定位元素的宽度 */
                height: 100% ; /* 相对于 被参照元素 的高度来确定被定位元素的高度 */
                display: none ;
                background-color: #9932CC;
            }

            .category:hover .sub-category {
                display: block ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper"> <!-- position : relative -->

            <div class="categories"> <!-- position : absolute -->

                <div class="category"> <!-- position : static -->
                    <a href="">
                        <span class="title">手机&nbsp;电话卡</span>
                        <span class="arrow">&gt;</span>
                    </a>
                    <div class="sub-category">
                    </div>
                </div>

                <div class="category"> <!-- position : static -->
                    <a href="">
                        <span class="title">手机&nbsp;电话卡</span>
                        <span class="arrow">&gt;</span>
                    </a>
                    <div class="sub-category" style="width: 400%;">
                    </div>
                </div>

                <div class="category"> <!-- position : static -->
                    <a href="">
                        <span class="title">手机&nbsp;电话卡</span>
                        <span class="arrow">&gt;</span>
                    </a>
                    <div class="sub-category" style="width: 200%;">
                    </div>
                </div>

            </div>

        </div>
        
    </body>
</html>